<template>
<div class="contain" v-loading="loading">
  <div class="header">
    <div class="sys-title" style="float: left;margin-left: 64px; margin-top: 13px; color: #ffd04b;">KTV运营平台</div>
      <div class="adminMsg">
        <p style="color: #ffd04b;float: left;margin-top: 13px">前台</p>
        <el-button @click="logout()" type="warning" size="mini" icon="el-icon-switch-button" style="float: right;padding:7px;margin-top: 10px;"></el-button>
      </div>
    </div>
  <div class="nav" >
    <el-row class = "tac">
      <el-col :span="24">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :router="true"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>客人登记</span>
            </template>
            <el-menu-item index='/homePage/roomMsg'><i class="el-icon-search"></i>包间查询</el-menu-item>
            <el-menu-item index='/homePage/registration'><i class="el-icon-edit-outline"></i>包间登记</el-menu-item>
          </el-submenu>
          <el-menu-item index='/homePage/drinks'>
            <i class="el-icon-goblet-square-full"></i>
            <span slot="title">酒水饮料</span>
          </el-menu-item>
          <el-menu-item index='/homePage/vipMsg' >
            <i class="el-icon-s-custom"></i>
            <span slot="title">会员管理</span>
          </el-menu-item>
          <el-menu-item index='/homePage/bill'>
            <i class="el-icon-notebook-2"></i>
            <span slot="title">账单结算</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
<div class="mainPage" >
  <el-main>
    <router-view></router-view>
  </el-main>
</div>
</div>
</template>

<script>
import axios from "axios";

export default {
  name:'homePage',
  data(){
    return{
      loading:false
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout(){
      this.$confirm('是否确定要退出登录?', '退出登录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        axios.get('http://120.24.48.65:8282/user/logout').then(response => {
          console.log(response.data)
        })
        setTimeout(() => {
          //代码
          this.loading = false
          this.$router.replace('/')
          window.localStorage.removeItem('admin')
        }, 500);
      }).catch(() =>{

      })
      },
  },
  created() {
    axios.get('http://120.24.48.65:8282/user/getToken').then(response =>{
      console.log(response.data)
      if (response.data==false) {
        this.$alert('您还未登录，请先登录！','未登录',{
          callback:action => {
            this.loading = true
            setTimeout(() => {
              this.loading = false
              this.$router.replace({path: '/'})
            }, 500);
          }
        });
      }
      else{
      }
    })

  }
}
</script>

<style >
*{
  margin: 0;
  padding: 0;
}
.contain{
  width: 100%;
  height:780px;
  overflow: hidden;
}
.header{
  width:100%;
  height:50px;
  background:#545c64;
  border: #606266 solid 1px;
}
.adminMsg{
  position: absolute;
  right: 10px;
  width: 80px;
  height: 40px;

}
.nav {
  border-right: #ffd04b solid;
  width: 200px;
  background: #545c64;
  color: #333;
  height: 730px;
  text-align: center;
  float: left;
}
.mainPage{
  padding: 0;
  background: #b7eef5;
  margin-left: 203px;
  height: 728px;
}
</style>